// http://thecodeplayer.com/walkthrough/html5-canvas-experiment-a-cool-flame-fire-effect-using-particles
var cvs = null;
var ctx = null;
var W = 0;
var H = 0;
var alpha = 0;  // 设备alpha轴的旋转角度
var particles = [];
var particlCount = 30;
var dX = 0;
var isDebug = false;
var logWrap = null;


window.onload = function () {
    cvs = document.getElementById('canvas');
    W = window.innerWidth;
    H = window.innerHeight;
    cvs.width = W;
    cvs.height = H;
    ctx = cvs.getContext('2d');
    logWrap = document.getElementById('log');
    
    for (var i = 0; i < particlCount; i++) {
        particles.push(new particl());
    }

    setInterval(draw, 36);
}


window.addEventListener('resize', function (evt) {
    W = window.innerWidth;
    H = window.innerHeight;
    cvs.width = W;
    cvs.height = H;
});


// window.addEventListener('deviceorientation', function (evt) {
//     alpha = evt.alpha / 180 * Math.PI;
//     if (evt.alpha <=90) { // 逆时针旋转
//         dX = - evt.alpha;
//     } else if (evt.alpha >= 180) { // 顺针旋转
//         dX = 360 - evt.alpha
//     }
//     dX = - parseInt(dX) / 10;
//     log(dX + ', ' + Math.cos(alpha));
// });


function particl (argument) {
    // speed, position, radius, life, colors
    // speed.x range = -2.5 to 2.5
    // speed.y range = -15 to -5 to make it move upwards
    this.speed = {
        x: (-4 + Math.random() * 8) + dX,
        y: (-15 + Math.random() * 10) * Math.cos(alpha)
        // y: (-15 + Math.random() * 10)
    };
    // position = center of the screen
    this.position = {
        x: W / 2,
        y: H / 5 * 3
    };
    // radius range = 10 to 80
    this.radius = 10 + Math.random() * (80 - 10);
    // life range = 20 to 30
    this.life = 20 + Math.random() * (30 - 20);
    this.remainingLife = this.life;
    // colors
    this.red = Math.round(Math.random() * 255);
    this.green = Math.round(Math.random() * 100);
    this.blue = Math.round(Math.random() * 50);
}


function draw () {
    ctx.globalCompositeOperation = 'source-over';
    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, W, H);
    ctx.globalCompositeOperation = 'lighter';

    for (var i = 0; i < particles.length; i++) {
        var p = particles[i];
        ctx.beginPath();
        p.opacity = Math.round(p.remainingLife / p.life * 100) / 100;
        // ctx.fillStyle = rgba(255, 255, 255, p.opacity);
        var gradient = ctx.createRadialGradient(p.position.x, p.position.y, 0, p.position.x, p.position.y, p.radius);
        gradient.addColorStop(0, rgba(p.red, p.green, p.blue, p.opacity));
        gradient.addColorStop(0.5, rgba(p.red, p.green, p.blue, p.opacity));
        gradient.addColorStop(1, rgba(p.red, p.green, p.blue, 0));
        ctx.fillStyle = gradient;
        ctx.arc(p.position.x, p.position.y, p.radius, Math.PI * 2, false);
        ctx.fill();

        p.position.x += p.speed.x;
        p.position.y += p.speed.y;
        p.radius -= 1;
        p.remainingLife -= 1.5;

        // regenerate paritcles
        if (p.radius < 0 || p.remainingLife < 0) {
            particles[i] = new particl();
        }
    }
}


function rgba (red, green, blue, alpha) {
    return 'rgba(' + red + ', ' + green + ',' + blue + ', ' + alpha +')';
}


function log (message) {
    if (isDebug && logWrap) {
        logWrap.innerText = message;
    }
}